<template>
  <div class="user-page">
    <!-- 上面基本信息部分 -->
    <div class="top">
      <!-- 头像 -->
      <div class="left">
        <img :src="user.photo" alt="" />
      </div>
      <div class="userInfo">
        <span>{{ user.name }}</span
        ><br />
        <span class="ren" v-if="!user.is_media">申请认证</span>
      </div>
    </div>
    <!-- 动态信息 -->
    <div class="dongtai">
      <van-row>
        <van-col span="8">
          <span>0</span><br />
          <span>动态</span>
        </van-col>
        <van-col span="8">
          <span>{{ user.follow_count }}</span
          ><br />
          <span>关注</span>
        </van-col>
        <van-col span="8">
          <span>{{ user.fans_count }}</span
          ><br />
          <span>粉丝</span>
        </van-col>
      </van-row>
    </div>
    <!-- 作品收藏 -->
    <div class="mySelf">
      <van-row>
        <van-col span="8">
          <van-icon name="description" /><br />
          <span>我的作品</span>
        </van-col>
        <van-col span="8">
          <van-icon name="star-o" /><br />
          <span>我的收藏</span>
        </van-col>
        <van-col span="8">
          <van-icon name="eye-o" /><br />
          <span>阅读历史</span>
        </van-col>
      </van-row>
    </div>
    <!-- 设置操作部分 -->
    <div>
      <van-cell-group>
        <van-cell title="编辑资料" icon="edit" is-link to="/user/edituser" />
        <van-cell
          title="小智同学"
          icon="user-circle-o"
          is-link
          to="/user/xaiozhi"
        />
        <van-cell title="系统设置" icon="setting-o" is-link />
        <van-cell title="退出登录" icon="exchange" is-link @click="loginOut" />
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import { getUserInfo } from "@/api/user.js";
export default {
  data() {
    return {
      user: {} //用户的信息
    };
  },
  methods: {
    async getUser() {
      try {
        const res = await getUserInfo();
        console.log(res);
        this.user = res.data.data;
        console.log(this.user, "用户的头像");
        this.$store.commit("saveAvatar", res.data.data.photo);
      } catch (err) {
        console.log(err);
        this.$toast.fail("获取用户信息失败");
      }
    },
    //退出登录
    loginOut() {
      // 删除token
      this.$store.commit("sToken", {});
      // 跳转到登录页面
      this.$router.push("/login");
    }
  },
  mounted() {
    this.getUser();
  }
};
</script>
<style lang="less" scoped>
.user-page {
  .top {
    height: 100px;
    padding: 25px 0 0 20px;
    box-sizing: border-box;
    background-color: #1989fa;
    .left {
      float: left;
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .userInfo {
      float: left;
      .ren {
        color: #1989fa;
        background-color: #ffffff;
        font-size: 14px;
      }
      span {
        // display: block;
        font-size: 17px;
        color: #ffffff;
        margin-top: 7px;
      }
    }
  }
  .dongtai {
    padding: 10px 0 15px 0;
    height: 60px;
    background-color: #1989fa;
    .van-col {
      text-align: center;
      span {
        font-size: 15px;
        color: #ffffff;
      }
    }
  }
  .mySelf {
    padding: 10px 0;
    background-color: #fff;
    border: 0 none;
    .van-col {
      text-align: center;
      .van-icon {
        color: cornflowerblue;
      }
      span {
        font-size: 13px;
      }
    }
  }
}
</style>
